<extend name="Public:base"/>
<block name="js">
    <link href="__JS__plugin/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="__JS__plugin/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
    <link href="__JS__plugin/datatables-plugins/editable/dataTables.editor.css" rel="stylesheet">
</block>
<block name="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group" id="accordion">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseOne">期刊高级查找-展开/收起</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body" id="check">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">期刊合作</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">能安排</a> <a
                                            class="btn mgzl">不能安排</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">期刊分类</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">学报类</a> <a
                                            class="btn mgzl">科学类</a> <a
                                            class="btn mgzl">艺术类</a> <a class="btn mgzl">人文教育类</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">核心类别</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">普通期刊</a> <a
                                            class="btn mgzl">核心期刊</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">期刊级别</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">省级</a> <a
                                            class="btn mgzl">国家级</a> <a
                                            class="btn mgzl">北核</a> <a class="btn mgzl">CSSCI</a>
                                        <a class="btn mgzl">双核</a> <a class="btn mgzl">C扩</a>
                                        <a class="btn mgzl">统计源</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">期刊周期</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">周刊</a> <a
                                            class="btn mgzl">旬刊</a> <a
                                            class="btn mgzl">半月刊</a> <a class="btn mgzl">月刊</a>
                                        <a class="btn mgzl">双月刊</a> <a class="btn mgzl">季刊</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">新闻总署</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">上新闻总署</a> <a
                                            class="btn mgzl">不上新闻总署</a>
                                    </div>
                                </div>
                                <div class="form-group" data-multi="1">
                                    <label class="col-sm-1 control-label">上网情况</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">知网</a> <a
                                            class="btn mgzl">万方</a> <a
                                            class="btn mgzl">维普</a> <a class="btn mgzl">龙源</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">现安排时间</label>

                                    <div class="col-sm-11">
                                        <a href="#" class="btn btn-info mgzl">不限</a> <a class="btn mgzl">1月</a> <a
                                            class="btn mgzl">2月</a> <a
                                            class="btn mgzl">3月</a> <a class="btn mgzl">4月</a>
                                        <a class="btn mgzl">5月</a> <a class="btn mgzl">6月</a>
                                        <a class="btn mgzl">7月</a> <a class="btn mgzl">8月</a>
                                        <a class="btn mgzl">9月</a> <a class="btn mgzl">10月</a>
                                        <a class="btn mgzl">11月</a> <a class="btn mgzl">12月</a>
                                        <a class="btn mgzl">明年</a> <a class="btn mgzl">后年</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">期刊省份</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">河北省</a> <a
                                            class="btn mgzl">河南省</a> <a
                                            class="btn mgzl">云南省</a> <a class="btn mgzl">辽宁省</a>
                                        <a class="btn mgzl">黑龙江省</a> <a class="btn mgzl">湖南省</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">发票详情</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">纸质发票</a> <a
                                            class="btn mgzl">电子发票</a>
                                        <a class="btn mgzl">无发票</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">录用通知单</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info  mgzl">不限</a> <a class="btn mgzl">纸质通知单</a> <a
                                            class="btn mgzl">电子通知单</a>
                                        <a class="btn mgzl">无通知单</a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">电话查稿</label>

                                    <div class="col-sm-11">
                                        <a class="btn btn-info mgzl">不限</a> <a class="btn mgzl">可电话查稿</a> <a
                                            class="btn mgzl">不可电话查稿</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form>
                <div class="form-group" id="selectColumn">
                    <label>可选列：</label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="2" checked>名称
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="3" checked>期刊细分
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="4" checked>期刊分类
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="5" checked>安排时间
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="6" checked>报价
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="7" checked>联系编辑
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="8" checked>版本详情
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="9" checked>主办单位
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="column" value="10" checked>备注
                    </label>
                </div>
            </form>
            <table class="table table-hover" id="result" width="100%">
                <thead>
                <tr>
                    <th>#</th>
                    <th>编号</th>
                    <th>名称</th>
                    <th>期刊细分</th>
                    <th>期刊分类</th>
                    <th>安排时间</th>
                    <th>期刊报价</th>
                    <th>联系编辑（admin）</th>
                    <th>版本详情</th>
                    <th>主办单位</th>
                    <th>备注</th>
                </tr>
                </thead>
            </table>
            <!-- /.table-responsive -->
        </div>
    </div>
</block>
<block name="footerjs">
    <!-- DataTables JavaScript -->
    <script src="__JS__plugin/datatables/media/js/jquery.dataTables.js"></script>
    <script src="__JS__plugin/datatables-plugins/editable/dataTables.editor.js"></script>
    <script src="__JS__plugin/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript">
        $(function () {
            var requestJson = function(){
                console.log('click')
                return [{label:"a", value:"value"}];
            }

            var detailRows = [];
            var fields = [
                {label: "序号", name: 'mz_id'},
                {label: "编号", name: 'mz_number'},
                {label: "名称", name: 'mz_name'},
                {label: "分类", name: 'mz_type', type: "select", ipOpts: requestJson()},
                {label: "类别", name: 'mz_category'},
                {label: "时间", name: 'mz_plantime'},
                {label: "报价", name: 'mz_price'},
                {label: "联系编辑", name: 'mz_coneditor'},
                {label: "版本", name: 'mz_verdesc'},
                {label: "主办单位", name: 'mz_publish'},
                {label: "备注", name: 'mz_mark1'},
            ];
            var editor = new $.fn.dataTable.Editor({
                ajax: ThinkPHP.U('Magazine/modify'),
                table: "#result",
                fields: fields
            });

            var editIcon = function(data, type, row){
                if(type === 'display'){
                    return data + ' <i class="fa fa-pencil"/>';
                }
                return data;
            }

            editor.on('onOpen', function(){
                $(document).on('keydown.editor', function(e){
                    if(e.keyCode === 9){
                        e.preventDefault();
                        var cell = $('div.DTE').parent();
                        if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                            cell.prev().click();
                        }else if ( e.shiftKey ) {
                            cell.parent().prev().children().last(0).click();
                        }else if ( cell.next().length ) {
                            cell.next().click();
                        }else {
                            cell.parent().next().children().eq(1).click();
                        }
                    }
                })
            }).on('onClose', function(){
                $(document).off( 'keydown.editor' );
            });

            var dt = $('#result').DataTable({
                dom:"Tfrtip",
                ajax: {
                    url: ThinkPHP.U('Magazine/lists'),
                    type: "POST"
                },
                processing: true, serverSide: true, ordering: false, bFilter: false,
                language: {
                    url: "/Public/js/plugin/datatables-plugins/i18n/Chinese.lang"
                },
                pageLength: 10,
                columns: [
                    {class : "details-control", orderable : false, data : null, defaultContent : ""},
                    { data : "mz_number"},
                    { data : "mz_name", render: editIcon},
                    { data : "mz_type", render: editIcon},
                    { data : "mz_category", render: editIcon},
                    { data : "mz_plantime", render: editIcon},
                    { data : "mz_price", render: editIcon},
                    { data : "mz_coneditor", render: editIcon},
                    { data : "mz_verdesc", render: editIcon},
                    { data : "mz_publish", render: editIcon},
                    { data : "mz_mark1", render: editIcon},
                ],
                columnDefs: [
//                    { targets : [4,5,6], visible : false },
                ],
                tableTools: {
                    sRowSelect: "os",
                    aButtons: [
                        { sExtends: "editor_create", editor: editor },
                        { sExtends: "editor_edit",   editor: editor },
                        { sExtends: "editor_remove", editor: editor }
                    ]
                }
            }).on('click', 'tbody td i', function (e) {
                e.stopImmediatePropagation();
                console.log(editor)
                editor.inline($(this).parent());
            }).on('click', 'tbody tr td.details-control', function (e) {
                var tr = $(this).closest('tr');
                var row = dt.row(tr);
                var idx = $.inArray(tr.attr('id'), detailRows);
                if (row.child.isShown()) {
                    tr.removeClass('details');
                    row.child.hide();
                    detailRows.splice(idx, 1)
                } else {
                    tr.addClass('details');
                    row.child(format(row.data())).show()
                    if (idx === -1) detailRows.push(tr.attr('id'));
                }
            }).on('draw', function () {
                $.each(detailRows, function (i, id) {
                    $('#' + id + 'td.details-control').trigger('click');
                });
            });

            $('#selectColumn').on('click', 'input', function (e) {
                var column = dt.column($(this).val());
                column.visible(!column.visible());
            });


            function format(data) {
                var txt = "<table cellpadding=\"5\" cellspacing=\"0\" border=\"0\" style=\"padding-left:50px;\"><tr>";
                var i = 1;
                for (var key in data) {
                    txt += "<td>" + key + ":</td><td>" + data[key];
                    if (i % 3 == 0) txt += "</td></tr>";
                    i++;
                }
                return txt + "</table>";
            }
        });

    </script>
</block>